{% include "header.tpl" %}
<link rel="stylesheet" type="text/css" href="lib/dhtmlxGantt/dhtmlxGantt/codebase/dhtmlxgantt.css" />
<script type="text/javascript" src="lib/dhtmlxGantt/dhtmlxGantt/codebase/dhtmlxgantt.js"></script>
<script type="text/javascript">
	window.onload = function() {
		var base = new dhtmlXLayoutObject('container', '3T', 'dhx_skyblue');
           base.cont.obj._offsetTop = 60;
        base.cont.obj._offsetLeft = 30;
		base.cells("b").setWidth(500);
		base.cells("b").setHeight(300);
		base.cells("a").hideArrow();

		var text = base.cells("a").setText("Current Projects");
		var text = base.cells("b").setText("Search Projects");
		var text = base.cells("c").setText("Statistics");

		var toolbar = base.attachToolbar();
		toolbar.setIconsPath("images/");
		toolbar.setIconSize(48);

		// adding a home link for default
		toolbar.addButton('home', 'Home', 'Home');
		toolbar.setItemImage('home', 'Home.png');
		toolbar.setItemToolTip('home', 'Home');
		toolbar.attachEvent("onClick", function(id) {
			menuButtons(id);
		});
		// build the menus dynamically from ajax call to controller
		$.getJSON('core/getMenu', function(data) {
			$.each(data, function(key, value) {
				buildToolbar(value, toolbar);
			})
		})
		// status bar
		var statusBar = base.attachStatusBar();
		statusBar.setText("Simple Status Bar");

		// attach a div to the layout
		base.cells("a").attachObject("gantt_div");

		var gantt = new GanttChart();
		gantt.setImagePath('lib/dhtmlxGantt/dhtmlxGantt/codebase/imgs/');
		gantt.setEditable(true);
		gantt.create('gantt_div');
		gantt.loadData('xml/projects.xml', true, true);
		//gantt.loadData('projects/getAllProjects', true, true);

	}
	menuButtons = function(id) {
		var url = window.location.protocol + "//" + window.location.hostname + "/";
		if(id == 'home') {
			var path = url;
		} else {
			var path = url + id;
		}

		window.location = path;
		return;
	}
</script>
</head>
<body>
    <div id="header">
        <span id='header_text'>Encompass</span>
        <br />
        <span id='tagline'>Project Management</span>
    </div>
    <div id="container">
        <div id="gantt_div"></div>
    </div>
    <div id="footer"></div>
</body>
</html> 
